<script type = "text/javascript">

	/**
	 * Mark obj with red color to warning about error
	 * @param obj: object to be marked
	 */
	function markError(obj) {
		obj.attr('style', 'color: #FF0000');

	}

	/**
	 * Un Mark obj with normal color
	 * @param obj: object to be marked
	 */
	function unMarkError(obj) {
		obj.removeAttr('style');
	}
	
    /**
    * Un Mark all object into normal color
    *
    */
    function resetLoginForm(){
	    unMarkError($('#spanUserName'));
	    unMarkError($('#spanPassword'));
	    unMarkError($('#spanError'));
	    $('#spanErrorLogin').hide();
    }
    
    /**
    * Process validate singnup form
    *
    */
    function processLoginAdminForm() {
		resetLoginForm();
	 	var checkResult = true;
		if ( $.trim($('#email').val()) == '' ) {
			markError($('#spanEmail'));
			checkResult = false;
		}
		if ( $.trim($('#password').val()) == '' ) {
			markError($('#spanPassword'));
			checkResult = false;
		}
		if (checkResult == false){
		  	markError($('#spanError'));
		  	// Do nothing
		 	return false;
	    }
		return true;
  }
</script>
<div class="box">
    <!--Begin Login Header-->
    <div class="header">
      <p><img src="<{$APPLICATION_URL}>/Themes/Default/Images/admin/half_width_icon.png" alt="Half Width Box" width="30" height="30" />Login Panel</p>
    </div>
    <!--End Login Header-->
    <div class="body">
      <form action = "<{$APPLICATION_URL}>/Admin/Login/login" method="post" id = "loginForm" name = "loginForm" style="padding: 0 10px 0 10px;" onsubmit="return processLoginAdminForm();">
        <span id = 'spanErrorLogin' style="color: #FF0000;"><{$errorLoginMessage}></span>
        <p>
          <label ><span id = 'spanEmail'>Email:</span></label>
          <input name="email" id = "email" type="text" class="textfield large" />
        </p>
        <p>
          <label><span id = 'spanPassword'>Password:</span></label>
          <input name="password" id = "password" type="password" class="textfield large" />
        </p>
        <p>
         <input name="loginButton" type="submit" class="button2" value="Login and Continue" />
        
        <!--
          <input type="checkbox" name="checkbox" id="checkbox" /> 
          Remember me
          -->
        </p>
      </form>
    </div>
  </div>
  <div class="info">
    <strong><img src="<{$APPLICATION_URL}>/Themes/Default/Images/admin/iinfo_icon.png" alt="Information" width="28" height="29" class="icon" /></strong>Just press login to continue.<a href="#" class="close_notification" title="Click to Close"><img src="<{$APPLICATION_URL}>/Themes/Default/Images/admin/close_icon.gif" width="6" height="6" alt="Close" /></a>
</div>